<template>
  <div class="movie-detail-container">
    <div v-if="loading" class="loading">加载中...</div>
    
    <div v-else-if="movie" class="movie-detail">
      <div class="movie-header">
        <div class="poster">
          <img 
            :src="movie.poster || 'https://via.placeholder.com/300x450'" 
            :alt="movie.title"
          >
        </div>
        <div class="info">
          <h1>{{ movie.title }}</h1>
          <p class="meta">
            <span>{{ movie.year }}</span>
            <span> · </span>
            <span>{{ movie.genre }}</span>
            <span> · </span>
            <span>{{ movie.runtime }}分钟</span>
          </p>
          <p class="rating">评分: {{ movie.rating || '暂无' }}</p>
          <p class="director">导演: {{ movie.director }}</p>
          <p class="actors">主演: {{ movie.actors }}</p>
          <p class="plot">{{ movie.plot }}</p>
        </div>
      </div>
      
      <div class="comments-section">
        <h2>评论</h2>
        
        <CommentForm 
          v-if="authStore.isAuthenticated" 
          @submit-comment="handleAddComment"
        />
        
        <div v-if="commentsLoading" class="loading">加载评论中...</div>
        
        <div v-else>
          <div v-if="comments.length === 0" class="no-comments">
            暂无评论
          </div>
          
          <div v-else class="comments-list">
            <div v-for="comment in comments" :key="comment.id" class="comment">
              <div class="comment-header">
                <span class="username">{{ comment.username }}</span>
                <span class="date">{{ formatDate(comment.createdAt) }}</span>
              </div>
              <div class="comment-content">{{ comment.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="not-found">
      电影不存在
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import api from '../composables/useApi'
import CommentForm from '../components/CommentForm.vue'

const route = useRoute()
const movie = ref(null)
const comments = ref([])
const loading = ref(true)
const commentsLoading = ref(true)
const authStore = useAuthStore()

onMounted(async () => {
  try {
    const movieResponse = await api.getMovieById(route.params.id)
    movie.value = movieResponse.data
    
    const commentsResponse = await api.getComments(route.params.id)
    comments.value = commentsResponse.data
  } catch (error) {
    console.error('获取电影详情失败:', error)
  } finally {
    loading.value = false
    commentsLoading.value = false
  }
})

const handleAddComment = async (content) => {
  try {
    const newComment = {
      movieId: route.params.id,
      userId: authStore.user.id,
      username: authStore.user.username,
      content
    }
    
    const response = await api.addComment(newComment)
    comments.value.unshift(response.data)
  } catch (error) {
    console.error('添加评论失败:', error)
    alert('添加评论失败')
  }
}

const formatDate = (dateString) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(dateString).toLocaleDateString(undefined, options)
}
</script>

<style scoped>
.movie-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.loading, .not-found {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
}

.movie-header {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

.poster {
  flex: 0 0 300px;
}

.poster img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info {
  flex: 1;
}

h1 {
  margin-top: 0;
  color: #333;
}

.meta {
  color: #666;
  margin: 0.5rem 0;
}

.rating, .director, .actors {
  margin: 0.5rem 0;
}

.plot {
  margin-top: 1.5rem;
  line-height: 1.6;
}

.comments-section {
  margin-top: 3rem;
  border-top: 1px solid #eee;
  padding-top: 2rem;
}

h2 {
  margin-bottom: 1.5rem;
}

.no-comments {
  text-align: center;
  padding: 1rem;
  color: #666;
}

.comments-list {
  margin-top: 1.5rem;
}

.comment {
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f9f9f9;
  border-radius: 4px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.username {
  font-weight: bold;
}

.date {
  color: #666;
}

.comment-content {
  line-height: 1.5;
}

@media (max-width: 768px) {
  .movie-header {
    flex-direction: column;
  }
  
  .poster {
    flex: 0 0 auto;
    max-width: 300px;
    margin: 0 auto;
  }
}
</style>